<template>
  <div class="payment-settings">
    <h2 class="payment-settings__title">支付信息</h2>
    <p class="payment-settings__subtitle">设置您的USDT收款地址和提现选项。</p>
    
    <div class="settings-card">
      <div class="settings-card__body">
        <!-- USDT地址设置 -->
        <div class="settings-section">
          <h3 class="settings-section__title">USDT收款地址</h3>
          
          <div class="form-group" :class="{ 'has-error': showAddressError }">
            <div class="address-input-container" v-if="!isEditing">
              <div class="address-display">
                <div class="address-text">{{ usdtAddress || '未设置' }}</div>
                <div class="address-note" v-if="addressNote">备注: {{ addressNote }}</div>
              </div>
              
              <div class="address-actions">
                <button 
                  v-if="usdtAddress" 
                  class="btn btn-link"
                  @click="copyAddress"
                >
                  <i class="fas fa-copy"></i> 复制
                </button>
                
                <button 
                  class="btn btn-sm btn-outline"
                  @click="startEditing"
                >
                  <i class="fas fa-pencil-alt"></i> {{ usdtAddress ? '修改' : '添加' }}
                </button>
              </div>
            </div>
            
            <div class="address-edit-form" v-else>
              <div class="form-group">
                <label class="form-label">USDT地址 (TRC20网络)</label>
                <div class="input-group">
                  <input 
                    type="text" 
                    class="form-control" 
                    placeholder="输入您的USDT-TRC20地址" 
                    v-model="newAddress"
                    :class="{ 'error': showAddressError }"
                  />
                  <button 
                    class="btn verify-btn" 
                    :class="{
                      'btn-primary': !isVerifying && !isVerified,
                      'btn-loading': isVerifying,
                      'btn-success': isVerified
                    }"
                    @click="verifyAddress"
                    :disabled="!canVerify || isVerifying"
                  >
                    <span v-if="isVerifying">
                      <i class="fas fa-circle-notch fa-spin"></i> 验证中
                    </span>
                    <span v-else-if="isVerified">
                      <i class="fas fa-check"></i> 已验证
                    </span>
                    <span v-else>
                      <i class="fas fa-shield-alt"></i> 验证
                    </span>
                  </button>
                </div>
                
                <div v-if="showAddressError" class="error-message">
                  <i class="fas fa-exclamation-triangle"></i> {{ addressErrorMessage }}
                </div>
                
                <div v-if="isVerified" class="success-message">
                  <i class="fas fa-check-circle"></i> 地址验证成功
                </div>
              </div>
              
              <div class="form-group">
                <label class="form-label">地址备注 (选填)</label>
                <input 
                  type="text" 
                  class="form-control" 
                  placeholder="添加备注以便识别此地址 (例如: 我的币安账户)" 
                  v-model="newAddressNote"
                />
              </div>
              
              <div class="form-actions">
                <button 
                  class="btn btn-outline" 
                  @click="cancelEditing"
                >
                  取消
                </button>
                
                <button 
                  class="btn btn-primary" 
                  :disabled="!canSave"
                  @click="saveAddress"
                >
                  <span v-if="isSaving">
                    <i class="fas fa-circle-notch fa-spin"></i> 保存中
                  </span>
                  <span v-else>
                    <i class="fas fa-save"></i> 保存地址
                  </span>
                </button>
              </div>
            </div>
          </div>
          
          <div class="notice-box info" v-if="!isEditing">
            <i class="fas fa-info-circle"></i>
            <p>
              请确保提供正确的USDT-TRC20网络地址。地址错误可能导致资金丢失，无法找回。
              我们建议您在保存前验证您的地址。
            </p>
          </div>
        </div>
        
        <!-- 提现信息 -->
        <div class="settings-section">
          <h3 class="settings-section__title">提现信息</h3>
          
          <div class="info-cards">
            <div class="info-card">
              <div class="info-card__icon">
                <i class="fas fa-money-bill-wave"></i>
              </div>
              <div class="info-card__content">
                <h4>最低提现金额</h4>
                <p>50 USDT</p>
                <div class="info-card__hint">
                  单笔提现不能低于此金额
                </div>
              </div>
            </div>
            
            <div class="info-card">
              <div class="info-card__icon">
                <i class="fas fa-clock"></i>
              </div>
              <div class="info-card__content">
                <h4>处理时间</h4>
                <p>1-3 个工作日</p>
                <div class="info-card__hint">
                  自申请提交之日起计算
                </div>
              </div>
            </div>
            
            <div class="info-card">
              <div class="info-card__icon">
                <i class="fas fa-percentage"></i>
              </div>
              <div class="info-card__content">
                <h4>提现手续费</h4>
                <p>1% (最低1 USDT)</p>
                <div class="info-card__hint">
                  从提现金额中扣除
                </div>
              </div>
            </div>
          </div>
          
          <div class="notice-box warning">
            <i class="fas fa-exclamation-triangle"></i>
            <p>
              提现申请一旦处理将无法撤销。请确保您提供的USDT地址准确无误，
              因地址错误导致的资金损失将无法找回。
            </p>
          </div>
        </div>
      </div>
      
      <div class="settings-card__footer" v-if="!isEditing">
        <button 
          class="btn btn-primary" 
          :disabled="isSaving"
          @click="saveSettings"
        >
          <span v-if="isSaving">
            <i class="fas fa-circle-notch fa-spin"></i> 保存中...
          </span>
          <span v-else>
            <i class="fas fa-save"></i> 保存设置
          </span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 表单数据
const usdtAddress = ref('')
const addressNote = ref('')
const newAddress = ref('')
const newAddressNote = ref('')

// 编辑和验证状态
const isEditing = ref(false)
const isVerifying = ref(false)
const isVerified = ref(false)
const showAddressError = ref(false)
const addressErrorMessage = ref('')
const isSaving = ref(false)

// 计算属性
const canVerify = computed(() => {
  return newAddress.value.trim().length > 0 && !isVerified.value
})

const canSave = computed(() => {
  return isVerified.value && !isSaving.value
})

// 初始化数据
onMounted(async () => {
  try {
    // 模拟从API获取数据
    await new Promise(resolve => setTimeout(resolve, 600))
    
    // 模拟后端返回的数据
    const data = {
      usdt_address: 'TJHZFYSbGREgG9vgQE5CyJAkXmXKbYRjk1',
      address_note: '币安账户',
      is_verified: true
    }
    
    // 更新本地状态
    usdtAddress.value = data.usdt_address
    addressNote.value = data.address_note
  } catch (error) {
    console.error('加载支付设置失败', error)
  }
})

// 方法
const startEditing = () => {
  newAddress.value = usdtAddress.value
  newAddressNote.value = addressNote.value
  isVerified.value = false
  showAddressError.value = false
  isEditing.value = true
}

const cancelEditing = () => {
  newAddress.value = ''
  newAddressNote.value = ''
  isVerified.value = false
  showAddressError.value = false
  isEditing.value = false
}

const verifyAddress = async () => {
  if (!canVerify.value || isVerifying.value) return
  
  const address = newAddress.value.trim()
  
  if (address.length < 34) {
    showAddressError.value = true
    addressErrorMessage.value = 'USDT-TRC20地址长度不正确，请检查'
    return
  }
  
  if (!/^T[a-zA-Z0-9]{33}$/.test(address)) {
    showAddressError.value = true
    addressErrorMessage.value = 'USDT-TRC20地址格式不正确，地址应以T开头并且只包含字母和数字'
    return
  }
  
  // 开始验证
  showAddressError.value = false
  isVerifying.value = true
  
  try {
    // 模拟API调用验证地址
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 假设验证成功
    isVerified.value = true
  } catch (error) {
    showAddressError.value = true
    addressErrorMessage.value = '地址验证失败，请检查是否输入正确'
    console.error('地址验证失败', error)
  } finally {
    isVerifying.value = false
  }
}

const copyAddress = () => {
  if (!usdtAddress.value) return
  
  // 复制地址到剪贴板
  navigator.clipboard.writeText(usdtAddress.value)
    .then(() => {
      alert('地址已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败', err)
      alert('复制失败，请手动复制')
    })
}

const saveAddress = async () => {
  if (!canSave.value || isSaving.value) return
  
  isSaving.value = true
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 更新显示的地址
    usdtAddress.value = newAddress.value.trim()
    addressNote.value = newAddressNote.value.trim()
    
    // 关闭编辑模式
    isEditing.value = false
    newAddress.value = ''
    newAddressNote.value = ''
    isVerified.value = false
  } catch (error) {
    console.error('保存地址失败', error)
    alert('保存地址失败，请重试')
  } finally {
    isSaving.value = false
  }
}

const saveSettings = async () => {
  if (isSaving.value) return
  
  isSaving.value = true
  
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 成功提示
    alert('支付设置已保存')
  } catch (error) {
    console.error('保存设置失败', error)
    alert('保存失败，请重试')
  } finally {
    isSaving.value = false
  }
}
</script>

<style scoped lang="scss">
.payment-settings {
  margin-bottom: 32px;
  
  &__title {
    font-size: 20px;
    font-weight: 600;
    color: #2F3542;
    margin-top: 0;
    margin-bottom: 8px;
  }
  
  &__subtitle {
    color: #6C757D;
    margin-bottom: 24px;
  }
}

.settings-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  &__body {
    padding: 24px;
  }
  
  &__footer {
    padding: 16px 24px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
  }
}

.settings-section {
  margin-bottom: 32px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &__title {
    font-size: 16px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 16px;
    color: #2F3542;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
}

.form-group {
  margin-bottom: 20px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.has-error {
    .form-control {
      border-color: #dc3545;
    }
  }
}

.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  color: #333;
}

.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
  
  &:focus {
    outline: none;
    border-color: #FF4757;
    box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.1);
  }
  
  &.error {
    border-color: #dc3545;
  }
  
  &::placeholder {
    color: #adb5bd;
  }
}

.input-group {
  display: flex;
  
  .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
  }
  
  .verify-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    width: 90px;
  }
}

.address-input-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f8f9fa;
  border-radius: 6px;
  padding: 14px 16px;
}

.address-display {
  flex: 1;
  word-break: break-all;
  
  .address-text {
    font-family: monospace;
    font-size: 14px;
    color: #2C3E50;
    font-weight: 500;
  }
  
  .address-note {
    font-size: 12px;
    color: #6C757D;
    margin-top: 4px;
  }
}

.address-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

.address-edit-form {
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 6px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.error-message {
  color: #dc3545;
  font-size: 13px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  
  i {
    margin-right: 6px;
  }
}

.success-message {
  color: #28a745;
  font-size: 13px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  
  i {
    margin-right: 6px;
  }
}

.notice-box {
  margin-top: 16px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  border-radius: 8px;
  
  &.info {
    background-color: rgba(13, 110, 253, 0.1);
    border-left: 4px solid #0d6efd;
    
    i {
      color: #0d6efd;
    }
    
    p {
      color: #0a58ca;
    }
  }
  
  &.warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-left: 4px solid #ffc107;
    
    i {
      color: #e0a800;
    }
    
    p {
      color: #856404;
    }
  }
  
  i {
    font-size: 16px;
    margin-right: 12px;
    margin-top: 2px;
  }
  
  p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
  }
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.info-card {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  
  &__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(255, 71, 87, 0.1);
    color: #FF4757;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 16px;
    flex-shrink: 0;
  }
  
  &__content {
    flex: 1;
    
    h4 {
      font-size: 14px;
      font-weight: 500;
      color: #6C757D;
      margin: 0 0 6px 0;
    }
    
    p {
      font-size: 16px;
      font-weight: 600;
      color: #2F3542;
      margin: 0 0 4px 0;
    }
  }
  
  &__hint {
    font-size: 12px;
    color: #6C757D;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  
  i {
    margin-right: 8px;
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  &.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
  }
  
  &.btn-primary {
    background-color: #FF4757;
    color: white;
    
    &:hover:not(:disabled) {
      background-color: darken(#FF4757, 5%);
    }
  }
  
  &.btn-success {
    background-color: #28a745;
    color: white;
    
    &:hover:not(:disabled) {
      background-color: darken(#28a745, 5%);
    }
  }
  
  &.btn-loading {
    background-color: #6C757D;
    color: white;
  }
  
  &.btn-outline {
    background-color: transparent;
    border: 1px solid #ced4da;
    color: #495057;
    
    &:hover:not(:disabled) {
      background-color: #f8f9fa;
    }
  }
  
  &.btn-link {
    background-color: transparent;
    color: #0d6efd;
    padding: 0;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

@media (max-width: 768px) {
  .info-cards {
    grid-template-columns: 1fr;
  }
  
  .address-input-container {
    flex-direction: column;
    
    .address-actions {
      margin-left: 0;
      margin-top: 12px;
      width: 100%;
      justify-content: flex-end;
    }
  }
  
  .form-actions {
    flex-direction: column-reverse;
    
    .btn {
      width: 100%;
    }
  }
}
</style> 